<template>
<div>
  <div class="success animated fadeInUp" >
    <div>
      <div class="title">表白成功</div>
      <div class="num">
        <img class="title-img"  src="../assets/img/520.png"/>
      </div>
      <div class="btns">
        <div class="btns-left" @click="onLook"><img  src="../assets/img/look.png"/></div>
        <div class="btns-right" @click="onShowMask"><img  src="../assets/img/share.png"/></div>
      </div>
      <div class="tips">
        <div class="tip">分享即有机会</div>
        <div class="tip">得到"谭木匠"送出的精美礼品</div>
      </div>
      <div class="text">我们将会把所有收集到的</div>
      <div class="text">520表白制作为爱心墙放置于</div>
      <div class="text">谭木匠工厂中</div>
      <div class="text">同时在谭木匠所有门店荧幕中展示</div>
      <div class="text">每一份心意都会被传递</div>
      <div class="text">每一次表白都会被珍视</div>
    </div>
    <div class="mask animated fadeInUp" @click="onShowMask" v-if="showMask">
      <img src="../assets/img/you.png"/>
      <div class="text">点击右上角,</div>
      <div class="text2">分享给朋友</div>
    </div>
  </div>
</div>
</template>

<script>
import '../assets/js/wx-share'
import wx from 'weixin-js-sdk'
export default {
  name: 'Success',
  data () {
    return {
      showMask: false
    }
  },
  mounted () {
    let userId = sessionStorage.getItem('userId')
    let confessionId = sessionStorage.getItem('bbid')
    let shareJson = {
      title: '谭木匠520活动—“不一样的520”', // 分享标题
      desc: '谭木匠举办“匠心谭木匠，温暖南艺行”活动，带你去看一个不一样的520',
      link: `http://ctans.com/dist/index.html#/null?userId=${userId}&confessionId=${confessionId}`, // 分享链接，该链接域名必须与当前企业的可信域名一致
      imgUrl: 'http://ctans.com/dist/static/img/logo-1.jpg',
      type: 'link', // 分享类型,music、video或link，不填默认为link
      dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
      success: function () {
        if (confessionId == null || typeof (confessionId) === 'undefined' || confessionId === '') {
        } else {
          window.location.href = 'http://ctans.com/dist/index.html#/money'
        }
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    }
    wx.onMenuShareAppMessage(shareJson)
  },
  methods: {
    gotoMoney () {
      this.$router.push({ path: 'money' })
      return false
    },
    onShowMask () {
      this.showMask = !this.showMask
    },
    onLook () {
      this.$router.push({ path: 'look' })
    }
  }
}
</script>
<style  @scoped lang="less">
    .success{
      height: 100vh;
      width: 7.5rem;
      overflow: hidden;
      background-size:100%;
      text-align:center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-family: 思源黑体;
      .title{
        margin-top: 1rem;
        font-size: .62rem;
        font-weight: bold;
        margin-bottom: .6rem;
        color: #000;
      }
      .num{
        margin-bottom: 1.2rem;
        .title-img{
          width: 1.72rem!important;
          height: 1.05rem;
          margin: 0 auto;
        }
      }
      .btns{
        width: 6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .24rem;
        font-weight: bold;
        .btns-left{
          width: 2.63rem;
          margin-right: .5rem;
        }
        .btns-right{
          width: 2.63rem;
        }
    }
    .tips{
      width: 6rem;
      margin-bottom: 1rem;
      .tip{
        font-size: .19rem;
        text-align: right;
        margin-right: .2rem;
        color: #584848;
      }
    }
    .text{
      margin-bottom: .15rem;
      font-size: .25rem;
      color: #000;
    }
    .mask{
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0,0,0,.5);
      width: 100%;
      height: 100%;
      z-index: 9;
      img{
        position: absolute;
        right: .51rem;
        top: .7rem;
        width: .27rem;
        height: 1.43rem;
      }
      .text{
        position: absolute;
        right: .93rem;
        top: 1.3rem;
        color: #fff;
        font-size: .32rem;
        z-index: 10;
      }
      .text2{
        position: absolute;
        right: 1rem;
        top: 1.8rem;
        color: #fff;
        font-size: .32rem;
        z-index: 10;
      }
    }
    .maskMoney{
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0,0,0,.5);
      width: 100%;
      height: 100%;
      z-index: 9;
      animation-delay: 0s;
      .line{
        position: absolute;
        left: 50%;
        top: 0;
        width: .02rem;
        height: 78%;
        background: #FFF;
        animation-delay: 1s;
      }
      .text{
        width: 3rem;
        position: absolute;
        left: 50%;
        top: 78%;
        color: #fff;
        font-size: .25rem;
        z-index: 10;
        margin-left: -1.5rem;
        padding: .2rem;
        border-radius: .1rem;
        background: #DA3615;
        animation-delay: 2s;
      }
    }
    }
    .img-box{
        position: absolute;
        left: 50%;
        width: 5rem;
        height: 4rem;
        background: red;
        border-radius: .3rem;
        margin-left: -2.5rem;
        top: 50%;
        margin-top: -2rem;
        .box-title{
          font-size: .34rem;
          color: #FFF;
          margin: .6rem;
        }
        .box-content{
          font-size: .34rem;
          color: #FFF;
          margin: .6rem;
        }
    }

    </style>
